<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
<input>	text	单行文本框
<input>	radio	单选按钮
<input>	checkbox	复选框
<input>	password	密码框
<input>	button	普通按钮，也可以简写为 <button></button>
<input>	submit	提交按钮
<input>	reset	重置按钮
 -->
    <!-- 
      action属性：提交表单时向何处发送表单数据
      method属性：规定用于发送表单数据的 HTTP 方法
    -->
    <form action="/" method="get">
      <!-- 1.单行文本框 -->
      <!-- value=""	文本框的值 -->
      <!-- placeholder=""	提示文本，
        以浅灰色显示在文本框中，并不是文本框中的值 -->
      <!-- disabled	表示用户不能与元素交互，即：禁用 -->
      <p>用户名：<input type="text" value="" placeholder="请输入用户名" /></p>
      <!-- 2.密码框 显示内容为 隐藏 -->
      <!-- name=""	设置 互斥 ，需将多个 name 属性为相同的值 -->
      <!-- value=""	向服务器提交的值 -->
      <!-- checked	表示默认被选中 -->
      <!-- 3.单选按钮 -->
      <p>密码：<input type="password" value="" placeholder="请输入密码" /></p>
      <p>
        <!-- label标签用来将文字和单选按钮进行绑定 -->
        性别： <label><input type="radio" name="sex" value="1" /> 男</label>
        <label><input type="radio" name="sex" value="0" /> 女</label>
        <label><input type="radio" name="sex" checked value="2" /> 保密</label>
      </p>
      <!-- 4.复选框 -->
      <!-- name=""	同组复选框应该设置 name 为相同值 -->
      <!-- value="" 向服务器提交的值 -->
      <!-- checked	表示默认被选中 -->
      <p>
        兴趣爱好：
        <label>
          <input type="checkbox" name="hobby" checked value="篮球" /> 篮球
        </label>
        <label>
          <input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球
        </label>
        <label>
          <input type="checkbox" name="hobby" value="书法" /> 书法
        </label>
        <label>
          <input type="checkbox" name="hobby" value="跑步健身" /> 跑步健身
        </label>
      </p>
      <!-- 5.下拉菜单 -->
      请选择 省：
      <select>
        <option value="湖北省">湖北省</option>
        <option value="湖南省">湖南省</option>
        <option value="安徽省">安徽省</option>
        <option value="陕西省">陕西省</option>
      </select>
      市：
      <select>
        <option value="西安市">西安市</option>
      </select>
      区：
      <select>
        <option value="雁塔区">高新区</option>
      </select>
      <!-- 6.多行文本框 -->
      <p>用户评论： <textarea cols="40" rows="10"></textarea></p>
      <!-- 7.按钮 -->
      <!-- type="button"	普通按钮，也可以简写为 <button></button>
        <input>	type="submit"	提交按钮
        <input>	type="reset"	重置按钮 -->
      <button>我是一个button标签，是一个普通按钮</button>
      <p><input type="button" value="我是一个普通按钮" /></p>
      <p><input type="submit" value="提交表单信息" /></p>
      <p><input type="reset" value="重 置" /></p>
    </form>
  </body>
</html>
